<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- skuList表格 -->
        <el-table :data="skuList" border stripe :style="{ marginBottom: '30px' }">
            <el-table-column type="index" width="80" align="center" label="序号" />
            <el-table-column label="名称" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />

            <el-table-column label="默认图片">
                <template v-slot="{ row }">
                    <img :src="row.skuDefaultImg" width="120">
                </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight" />
            <el-table-column label="价格" prop="price" />

            <el-table-column label="操作" width="300">
                <template v-slot="{ row }">
                    <el-button v-if="row.isSale === 0" icon="ele-Top" title="上架" type="info" size="small"
                        @click="up(row.id)" />
                    <el-button v-else icon="ele-Bottom" title="下架" type="success" size="small" @click="down(row.id)" />
                    <el-button icon="ele-Edit" title="修改" type="primary" size="small" @click="edit" />
                    <el-button icon="ele-More" title="详情" type="info" size="small" @click="skuInfo(row.id)" />
                    <el-button icon="ele-Delete" title="删除" type="danger" size="small" @click="deleteSku(row.id)" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 页码 -->
        <el-pagination v-model:current-page="page" v-model:page-size="limit" :pager-count="7" :total="total"
            :page-sizes="[3, 5, 7, 10]" layout="prev, pager, next , sizes, total"></el-pagination>

        <!-- 抽屉 -->
        <el-drawer @close="close" v-model="drawer" title="I am the title" :with-header="false" size="50%">
            <el-row>
                <el-col :span="6">名称</el-col>
                <el-col :span="18">{{ skuInfoById.skuName }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="6">描述</el-col>
                <el-col :span="18">{{ skuInfoById.skuDesc }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="18">{{ skuInfoById.price }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="6">平台属性</el-col>
                <el-col :span="18">
                    <el-tag v-for="item in skuInfoById.skuAttrValueList" type="success" size="small">
                        {{ item.attrName }}-{{ item.valueName }}</el-tag>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="6">销售属性</el-col>
                <el-col :span="18">
                    <el-tag v-for="item in skuInfoById.skuSaleAttrValueList" type="success" size="small">
                        {{ item.saleAttrName }}-{{ item.saleAttrValueName }}</el-tag>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="6">商品图片</el-col>
                <el-col :span="18">
                    <!-- 走马灯 -->
                    <el-carousel height="300px" trigger="hover" autoplay="true">
                        <el-carousel-item v-for="item in skuInfoById.skuImageList" :key="item.id">
                            <img :src="item.imgUrl" width="450" height="450" />
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </el-card>
</template>


<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Sku",
});
</script>

<script setup lang="ts">
import { requestSkuList, type SkuInfoListType, requestOnSale, requestDeleteSku, type SkuInfoItemType, requestFindById } from "@/api/sku";
import { ElMessage } from "element-plus";
import { ref, onMounted, watch } from "vue"

//定义页码数据
const page = ref(1)
const limit = ref(10)
const total = ref(0)
//定义数据接收skuList数据
const skuList = ref<SkuInfoListType>([])


//请求所有skuList的回调函数
const getAllSkuList = async () => {
    try {
        //请求skuList
        const result = await requestSkuList(page.value, limit.value)
        //保存总页数
        total.value = result.total
        //保存分页列表数据
        skuList.value = result.records
    } catch {
        ElMessage.error("请求sku分页列表失败!")
    }
}


//1.初始化请求所有的skuList
onMounted(() => {
    getAllSkuList()
})

//2.改变页码发送分页列表请求
watch([page, limit], () => {
    getAllSkuList()
})

//3.上架
const up = async (skuId: number) => {
    try {
        await requestOnSale(skuId)
        ElMessage.success("上架成功!")
        //重新请求分页列表
        getAllSkuList()
    } catch {
        ElMessage.error("上架失败!")
    }
}

//4.下架
const down = async (skuId: number) => {
    try {
        await requestDeleteSku(skuId)
        ElMessage.success("下架成功!")
        //重新请求分页列表
        getAllSkuList()
    } catch {
        ElMessage.error("下架失败!")
    }
}

//5.修改
const edit = async (row: SkuInfoItemType) => {
    ElMessage.info("该功能正在开发中......")
}

//6.删除
const deleteSku = async (skuId: number) => {
    try {
        await requestDeleteSku(skuId)
        ElMessage.success("删除成功!")
        //重新请求分页列表
        getAllSkuList()
    } catch {
        ElMessage.error("删除失败!")
    }
}

//定义数据保存skuId请求回来的sku详情
const skuInfoById = ref<SkuInfoItemType>({
    skuName: "",
    skuDesc: "",
    price: 0,
    weight: "",
    category3Id: null,
    skuDefaultImg: "",
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
})
//定义数据啊控制抽屉的展示
const drawer = ref(false)
//7.详情
const skuInfo = async (skuId: number) => {
    //展示抽屉
    drawer.value = true

    //请求当前sku详情
    try {
        const result = await requestFindById(skuId)
        skuInfoById.value = result
    } catch {
        ElMessage.error("请求详情失败!")
    }
}

//8.关闭抽屉的回调
const close = () => {
    //清空抽屉中的数据
    skuInfoById.value = {
        skuName: "",
        skuDesc: "",
        price: 0,
        weight: "",
        category3Id: null,
        skuDefaultImg: "",
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
    }
}

</script>